import React, { Component } from 'react';
import "./home.css";
//导入自定义轮播图组件
import Banners from "../../componets/banners/banners"; 
//导入shoper组件
import Shoper from "./components/shoper/shoper"; 

class home extends Component {
    constructor(props){
        super(props);
        this.state = {
            banners:[]
        }
    }
    //react组件生命周期
    componentWillMount(){
        //组件将要挂载
        console.log('组件将要挂载'); 
    } 
    componentDidMount(){
        // 组件已经挂在
        console.log("组件已经挂载");
        this.$datas.home.then(res=>{
            this.setState({
                banners:[res.data.slice(0,8), res.data.slice(8)]
            });
        });
    }
    shouldComponentUpdate(){
        console.log("询问组件是否应该更新");
        return true;
    }
    componentWillUpdate(){
        // 组件将要更新
        console.log("组件将要更新");
    }
    componentDidUpdate(){
        //组件已经更新
        console.log('组件已经更新');
    }
    componentWillUnmount(){
        //组件将要卸载
        console.log('组件将要卸载');
    }
    render() {
        console.log('页面渲染');
        return (
            <div>
               <Banners>
                   {this.state.banners.map((item, index)=>{
                       return (
                       <div className="view" key={index}>
                           {item.map((item1, index1) => <Shoper item={item1} key={index1}/>)}
                       </div>);
                   })}  
               </Banners>
            </div>
        );
    }
}

export default home;